<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul,li{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			/*主体部分*/
			.nav{
				padding: 5px;
			}
			/*每一小块*/
			.nav .item{
				display: flex;
				border-radius: 5px;
				height:90px;
				margin-bottom: 5px;
			}
			.nav .item:nth-child(1){
				background: orangered;
			}
			.nav .item:nth-child(2){
				background: cornflowerblue;
			}
			.nav .item:nth-child(3){
				background: green;
			}
			.nav .item:nth-child(4){
				background: violet;
			}
			/*左边*/
			.nav .item .left{
				flex: 1;
				display: flex;
			}
			/*右边*/
			.nav .item .right{
				flex: 2;
				display: flex;
				flex-wrap: wrap;
			}
			.nav .item .right a{
				width: 50%;
				box-sizing: border-box;
				border-left: 1px solid white;
				border-bottom: 1px solid white;
				text-align: center;
				line-height: 45px;
				color: white;
			}
			.nav .item:nth-child(4) .right a{
				width: 33.33%;
			}
			/*图片*/
			.nav .pic img{
				width: 50%;
				border: none;
				float: left;
			}
			
			/*页脚*/
			.btm_nav {
				display: flex;
				height:40px;
				width: 100%;
				justify-content: space-around;
			}
			.btm_nav a{
				flex: 1;
				text-align: center;
				line-height: 45px;
				color: #000;
				border-bottom: 1px solid #ccc;
				border-top: 1px solid #ccc;
				font-size: 14px;
			}
			.last{
				height: 70px;
				font-size: 12px;
				color: #CCCCCC;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
			}
			.last a{
				border-left: 1px solid #CCCCCC;
				color: slategray;
				padding-left: 5px;
				padding-right: 5px;
			}
			.last a:nth-child(1){
				border-left: 0;
			}
		</style>
	</head>
	<body>
		<!--头部-->
		<header>
			<a href="javescript:;"><img src="img/banner.jpg" alt="图片加载中……" width="100%"/></a>
		</header>
		
		<!--主体部分-->
		<main>
			<section class="nav">
				<div class="item">
					<div class="left"></div>
					<div class="right">
						<a href="javascript:;">海外酒店</a>
						<a href="javascript:;">团购</a>
						<a href="javascript:;">特惠酒店</a>
						<a href="javascript:;">客栈公寓</a>
					</div>
				</div>
				<div class="item">
					<div class="left"></div>
					<div class="right">
						<a href="javascript:;">火车票</a>
						<a href="javascript:;">汽车票船票</a>
						<a href="javascript:;">国际机票</a>
						<a href="javascript:;">自驾专车</a>
					</div>
				</div>
				<div class="item">
					<div class="left"></div>
					<div class="right">
						<a href="javascript:;">攻略身边</a>
						<a href="javascript:;">邮轮</a>
						<a href="javascript:;">周末游</a>
						<a href="javascript:;">保险签证</a>
					</div>
				</div>
				<div class="item">
					<div class="right">
						<a href="javascript:;">门票玩乐</a>
						<a href="javascript:;">美食</a>
						<a href="javascript:;">全球购</a>
						<a href="javascript:;">礼品卡</a>
						<a href="javascript:;">出境WIFI</a>
						<a href="javascript:;">更多</a>
					</div>
				</div>
				<div class="pic">
					<a href="javascript:;"><img src="img/extra_1.png"/></a>
					<a href="javascript:;"><img src="img/extra_2.png"/></a>
				</div>
				<div class="edition">
					
				</div>
			</section>
		</main>
		
		<!--页脚-->
		<footer>
			<div class="btm_nav">
				<a href="javascript:;">电话预定</a>
				<a href="javascript:;">下载客户端</a>
				<a href="javascript:;">我的</a>
			</div>
			<div class="last">
				<div class="link">
					<a href="javascript:;">网站地图</a>
					<a href="javascript:;">ENGLISH</a>
					<a href="javascript:;">电脑版</a>
				</div>
				<p>&copy;2015 携程旅行</p>
			</div>
		</footer>
	</body>
</html>
